<template>
    <el-dialog
        :visible.sync="dialogVisible"
        :show="show"
        :width="defaultWd"
        :center="center"
        :close-on-click-modal="closeModal"
        :close-on-press-escape="closeEscape"
        :show-close="showClose"
        :before-close="handleClose"
        :modal-append-to-body="toBody"
        @close="handleCancel">
        <span slot="title">
            <slot name="title">{{title}}</slot>
        </span>
        <div slot="footer" :class="button.align">
            <slot name="footer">
                <el-button type="primary" @click="handleSave" size="small">{{button.ok}}</el-button>
                <el-button @click="handleCancel" size="small" v-if="showClose">{{button.cancel}}</el-button>
            </slot>
        </div>
        <slot></slot>
    </el-dialog>
</template>

<script>
    export default {
        name: '',
        // props: ['show', 'noEsc', 'noModal', 'width', 'center', 'button', 'toBody', 'title', 'showClose'],
        props: {
            /* 是否显示Dialog */
            show: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            /* 是否可以通过按下ESC关闭Dialog */
            noEsc: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            /* 是否可以通过点击modal关闭Dialog */
            noModal: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            /* Dialog的宽度 */
            width: {
                type: String,
                default: () => {
                    return '30%'
                }
            },
            /* 是否对头部和底部采用居中布局 */
            center: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            /* 按钮组 */
            button: {
                type: Object,
                default: () => {
                    return {
                        align: 'center',
                        cancel: '取消',
                        ok: '确定'
                    }
                }
            },
            /* 是否插入至body元素上 */
            toBody: {
                type: Boolean,
                default: () => {
                    return true
                }
            },
            /* 是否显示审核意见 */
            title: {
                type: String,
                default: () => {
                    return '提示'
                }
            },
            /* 是否关闭&取消按钮 */
            showClose: {
                type: Boolean,
                default: () => {
                    return true
                }
            }
        },
        data() {
            return {
                dialogVisible: this.show,
                closeEscape: this.noEsc,
                closeModal: this.noModal,
                defaultWd: this.width
            }
        },
        watch: {
            show(val) {
                this.dialogVisible = this.show
                if (!val) {
                    this.$emit('update:show', false)
                }
            }
        },
        mounted() {
        },
        methods: {
            handleClose(done) {
                this.$emit('update:show', false)
                done()
            },
            handleCancel() {
                this.$emit('update:show', false)
                this.$emit('cancel')
            },
            handleSave() {
                this.$emit('save')
            }
        },
        components: {}

    }
</script>

<style scoped lang="less">
    .center {
        text-align: center;
    }

    .left {
        text-align: left;
    }

    .right {
        text-align: right;
    }
</style>
